<template>
  <div class="box">
    <div class="system">
      <ClientOnly>
        <img src="./accets/images/404.png" />
      </ClientOnly>
      <div class="title">
        <h2>页面走丢了...</h2>
        <h4>远方的朋友你好！非常抱歉，您所请求的页面不存在！</h4>
        <h4>请仔细检查您输入的网址是否正确。</h4>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup></script>

<style scoped>
.box {
  height: 100vh;
  width: 100vw;
  background-color: #402e58;
}
.system {
  width: 1100px;
  margin: 0 auto;
  text-align: center;
  padding-top: 140px;
}
.system img {
  text-align: center;
  width: 500px;
}

.title h2 {
  color: #fff;
  font-size: 36px;
  letter-spacing: 4px;
  text-align: center;
  line-height: 120px;
}
.title h4 {
  color: #fff;
  font-size: 18px;
  /* font-weight: bold; */
  line-height: 38px;
  text-align: center;
}
.content {
  text-align: center;
  width: 100%;
}
.content span {
  display: inline-block;
  border: 1px solid #fff;
  color: #fff;
  cursor: pointer;
  font-size: 14px;
  padding: 5px 30px;
  font-weight: 800;
  margin-top: 5px;
  transition: 0.2s;
  border-radius: 15px;
}
.content span:hover {
  background-color: #c432c4;
  border: 1px solid #7395ff;
  transition: 0.2s;
}
</style>
